<template>
  <p class="badges">
    <a href="https://www.npmjs.com/package/moveable" target="_blank">
      <img
        src="https://img.shields.io/npm/v/vue-moveable.svg?style=flat-square&color=007acc&label=version"
        alt="npm version"/></a>
    <a href="https://github.com/probil/vue-moveable" target="_blank">
      <img
        src="https://img.shields.io/github/stars/probil/vue-moveable.svg?color=42b883&style=flat-square"
        alt="github stars"/></a>
    <a href="https://github.com/probil/vue-moveable/blob/master/LICENSE" target="_blank">
      <img
        src="https://img.shields.io/github/license/probil/vue-moveable.svg?style=flat-square&label=license&color=08CE5D"
        alt="license"
      />
    </a>
    <img src="https://img.shields.io/bundlephobia/minzip/vue-moveable?style=flat-square" alt="Minified library size">
    <a href="https://github.com/daybrush/moveable/tree/master/packages/react-moveable"
       target="_blank">
      <img
        alt="React"
        src="https://img.shields.io/static/v1.svg?label=&message=React&style=flat-square&color=61daeb"
      >
    </a>
    <a href="https://github.com/daybrush/moveable/tree/master/packages/preact-moveable"
       target="_blank">
      <img
        alt="Preact"
        src="https://img.shields.io/static/v1.svg?label=&message=Preact&style=flat-square&color=673ab8"
      />
    </a>
    <a href="https://github.com/daybrush/moveable/tree/master/packages/ngx-moveable"
       target="_blank">
      <img
        alt="Angular"
        src="https://img.shields.io/static/v1.svg?label=&message=Angular&style=flat-square&color=C82B38"
      />
    </a>
    <a href="https://github.com/probil/vue-moveable" target="_blank">
      <img
        alt="Vue"
        src="https://img.shields.io/static/v1.svg?label=&message=Vue&style=flat-square&color=3fb984"
      />
    </a>
  </p>
</template>
<style>
  .badges {
    text-align: center;
  }

  .badges a {
    margin: 0 3px;
  }

  .badges img {
    height: 20px;
  }
</style>
